<script setup lang="ts">
import {sha256} from "js-sha256";
import axios from "axios";
import macros from "../../macros";
import {router} from "../../main.js";
var user:string;
var olduser:string;
var oldpassword:string;
var password1:string;
var password2:string;
var passwordHash:string;
var passwordNotMatche:string="";
function submit(){
  passwordHash=sha256(password1);;
  oldpassword=sha256(oldpassword)
  var userinfo= {
    oldUsername:olduser,
    oldPassword:oldpassword,
    username: user,
    password: passwordHash
  }
  axios.post(macros.server+"/api/changeuser",userinfo)
      .then(function (response){
    if(response.data.status==200){
      router.push("/admin");
    }else{
      alert("修改失败");
    }
  }).catch(function (error){
    alert(error);
    console.log(error);
  });
}
function isPasswordMatche(){
  if(password1==password2){
    passwordNotMatche="";
  }else{
    passwordNotMatche="两次输入的密码不匹配"
  }
}
</script>

<template>
  <h2>请修改用户名和密码</h2>
  <form style="width: 30rem;margin: auto"  class="input" method="post">
    <lable for="username" class="form-label text-light">旧用户名：</lable>
    <input v-model="olduser" type="text" class="form-control" id="username" placeholder="用户名" name="username">
    <br/>
    <lable for="password" class="form-label text-light">旧密码：</lable>
    <input @change="isPasswordMatche" v-model="oldpassword" type="password" class="form-control" id="password" placeholder="密码" name="password1">
    <lable for="newusername" class="form-label text-light">新用户名：</lable>
    <input v-model="user" type="text" class="form-control" id="newusername" placeholder="用户名" name="username">
    <br/>
    <lable for="password1" class="form-label text-light">新密码：</lable>
    <input @change="isPasswordMatche" v-model="password1" type="password" class="form-control" id="password1" placeholder="密码" name="password1">
    <lable for="password2" class="form-label text-light">确认密码：</lable>
    <input @change="isPasswordMatche" v-model="password2" type="password" class="form-control" id="password2" placeholder="确认密码" name="password2">
    <p style="color: red">{{passwordNotMatche}}</p>
    <div style="text-align: center">
      <button @click="submit" type="button" class="btn btn-outline-light text-light" style="margin: 1rem">确认</button>
    </div>
  </form>
</template>

<style scoped>
.input{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
</style>